<template>
  <div>
    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
      <div class="widget am-cf">
        <div class="widget-head am-cf">
          <div class="widget-title am-fl">每日运营概况</div>
        </div>
        <div class="widget-body  am-fr">
          <multiple-toolbar
            ref="toolbar"
            class="toolbar"
            @search="handleFind"
            :needInitSearch="false"
            needGradeSearch
            areaTeam
            startDate
            endDate
            allperiod
            grade
            needAllPeriod
          ></multiple-toolbar>
          <div class="am-u-sm-12">
            <el-button-group>
              <el-button
                @click="active = 0;tableData = amountList; sumData=amObj"
                size="big"
                :class="{'el-button el-button--primary': active === 0}"
              >
                金额
              </el-button>
              <el-button
                @click="active = 1;tableData = branchList; sumData=brObj"
                size="big"
                :class="{'el-button el-button--primary': active === 1}"
              >
                科数
              </el-button>
              <el-button
                @click="active = 2;tableData = personList; sumData=peObj"
                size="big"
                :class="{'el-button el-button--primary': active === 2}"
              >
                人数
              </el-button>
            </el-button-group>
          </div>
          <div class="am-u-sm-12 am-form-group">
            <el-button
              size="small"
              type="success"
              @click="handleExport"
            >
              <span class="am-icon-download"></span>&nbsp;&nbsp;导出</el-button>
          </div>
          <div class="am-u-sm-12">
            <el-table
              :data="tableData"
              :showSummary="true"
              :summaryMethod="summary"
              border
              maxHeight="600"
              empty-text="暂无数据"
              stripe
              style="min-width: 100%"
            >
              <el-table-column
                prop="busTeamName"
                min-width="160"
                label="业务组"
              >
              </el-table-column>
              <el-table-column
                prop="newStudentNum"
                min-width="160"
                label="新生"
              >
                <template scope="scope">
                  <div>{{scope.row.newStudentNum | formatNumber(2)}}</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="oldStudentNum"
                min-width="160"
                label="老生"
              >
                <template scope="scope">
                  <div>{{scope.row.oldStudentNum | formatNumber(2)}}</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="seqStepStudentNum"
                min-width="160"
                label="续读生"
              >
                <template scope="scope">
                  <div>{{scope.row.seqStepStudentNum | formatNumber(2)}}</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="totalNum"
                min-width="160"
                label="总计"
              >
                <template scope="scope">
                  <div>{{scope.row.totalNum | formatNumber(2)}}</div>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                fixed="right"
                label="操作"
                width="120"
              >
                <template scope="scope">
                  <el-button
                    size="small"
                    @click="handleDetail(scope.row.amountBranchPersonDetailVoList)"
                  >查看明细</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <every-situation-detail
          ref="everySituationDetail"
          :titleType="titleType"
        ></every-situation-detail>
        <div class="am-u-lg-12 am-cf">
          <div class="am-fr">
            <pagination
              v-bind:total="total"
              v-bind:pageNo="pageNo"
              v-bind:pageSize="pageSize"
              @paging="loadTableData"
            />
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
import io from '../../lib/io'
import MultipleToolbar from './MultipleToolbar.vue'
import EverySituationDetail from './EverySituationDetail.vue'
import Pagination from '../base/Pagination.vue'
import moment from 'moment'

export default {
  data: function() {
    return {
      active: 0,
      total: 0,
      pageSize: 10,
      pageNo: 1,
      tableData: [],
      amountList: [],
      branchList: [],
      personList: [],
      sumData: {},
      amObj: {},
      peObj: {},
      brObj: {}
    }
  },
  components: {
    MultipleToolbar,
    Pagination,
    EverySituationDetail
  },
  watch: {},
  computed: {
    titleType() {
      if (this.active === 0) {
        return '金额'
      } else if (this.active === 1) {
        return '科数'
      } else if (this.active === 2) {
        return '人数'
      }
    }
  },
  mounted: function() {
    $(window).smoothScroll()
    //      this.loadTableData()
  },
  methods: {
    summary(item) {
      let sum = []
      if (this.sumData.newStudentNum) {
        sum[0] = '求和'
        sum[1] = this.sumData.newStudentNum.toFixed(2)
        sum[2] = this.sumData.oldStudentNum.toFixed(2)
        sum[3] = this.sumData.seqStepStudentNum.toFixed(2)
        sum[4] = this.sumData.totalNum.toFixed(2)
      }
      return sum
    },
    handleFind() {
      this.loadTableData(1)
    },
    handleDetail(amountBranchPersonDetailVoList) {
      this.$refs.everySituationDetail.show()
      this.$refs.everySituationDetail.tableData =
        amountBranchPersonDetailVoList || []
    },
    handleExport() {
      var _this = this
      if (
        !this.$refs.toolbar.formData.startDate ||
        !this.$refs.toolbar.formData.endDate
      ) {
        _this.$alert('请选择开始日期或者结束日期')
        return
      }
      io.downloadFile(io.exportAmountBranchPerson, this.formatData(), function(
        ret
      ) {
        if (ret.success) {
        } else {
          _this.$alert(ret.desc)
        }
      })
    },
    loadTableData: function(pageNo) {
      var _this = this
      _this.pageNo = pageNo || _this.pageNo || 1

      this.$showLoading()
      io.post(
        io.findAmountBranchPerson,
        Object.assign(
          {},
          {
            pageNo: _this.pageNo,
            pageSize: _this.pageSize
          },
          this.formatData()
        ),
        ret => {
          _this.$hiddenLoading()
          if (ret.success) {
            _this.total = ret.data.total
            if (_this.active === 0) {
              _this.tableData = ret.data.amountList
            } else if (_this.active === 1) {
              _this.tableData = ret.data.branchList
            } else if (_this.active === 2) {
              _this.tableData = ret.data.personList
            }
            _this.amountList = ret.data.amountList
            _this.branchList = ret.data.branchList
            _this.personList = ret.data.personList
          } else {
            _this.$alert(ret.desc)
          }
          this.peObj = {
            newStudentNum: 0,
            oldStudentNum: 0,
            seqStepStudentNum: 0,
            totalNum: 0
          }
          this.amObj = {
            newStudentNum: 0,
            oldStudentNum: 0,
            seqStepStudentNum: 0,
            totalNum: 0
          }
          this.brObj = {
            newStudentNum: 0,
            oldStudentNum: 0,
            seqStepStudentNum: 0,
            totalNum: 0
          }
          if (_this.amountList) {
            _this.amountList = _this.amountList.map(item => {
              this.amObj.newStudentNum += Number(item.newStudentNum)
              this.amObj.oldStudentNum += Number(item.oldStudentNum)
              this.amObj.seqStepStudentNum += Number(item.seqStepStudentNum)
              this.amObj.totalNum += Number(item.totalNum)
              return item
            })
          }
          if (_this.personList) {
            _this.personList = _this.personList.map(item => {
              this.peObj.newStudentNum += Number(item.newStudentNum)
              this.peObj.oldStudentNum += Number(item.oldStudentNum)
              this.peObj.seqStepStudentNum += Number(item.seqStepStudentNum)
              this.peObj.totalNum += Number(item.totalNum)
              return item
            })
          }
          if (_this.branchList) {
            _this.branchList = _this.branchList.map(item => {
              this.brObj.newStudentNum += Number(item.newStudentNum)
              this.brObj.oldStudentNum += Number(item.oldStudentNum)
              this.brObj.seqStepStudentNum += Number(item.seqStepStudentNum)
              this.brObj.totalNum += Number(item.totalNum)
              return item
            })
          }
          _this.sumData =
            _this.active === 0 ? this.amObj : _this.active === 1 ? this.brObj : this.peObj
        }
      )
    },
    formatData() {
      let toolbar = this.$refs.toolbar
      let busTeamIds = [],
        periodIds = [],
        gradeIds = []
      if (toolbar.formData.busTeamIds.length === 0) {
        toolbar.busTeams.map(val => {
          busTeamIds.push(val.busTeamId)
        })
      } else {
        busTeamIds = toolbar.formData.busTeamIds
      }
      if (toolbar.formData.periodIds.length === 0) {
        toolbar.periods.map(val => {
          periodIds.push(val.periodId)
        })
      } else {
        periodIds = toolbar.formData.periodIds
      }
      if (toolbar.formData.gradeIds.length === 0) {
        toolbar.grades.map(val => {
          if (val.value) {
            gradeIds.push(val.value)
          }
        })
      } else {
        gradeIds = toolbar.formData.gradeIds
      }
      return {
        startDate: toolbar.formData.startDate
          ? moment(toolbar.formData.startDate).format('YYYY-MM-DD') +
            ' 00:00:00'
          : '',
        endDate: toolbar.formData.endDate
          ? moment(toolbar.formData.endDate).format('YYYY-MM-DD') + ' 23:59:59'
          : '',
        areaTeamId: toolbar.formData.areaTeamId,
        periodIds: periodIds.join(','),
        gradeIds: gradeIds.join(',')
      }
    }
  }
}
</script>
<style lang="less" scoped>
.el-button-group {
  margin: 0 auto;
  display: table;
  padding-bottom: 15px;
  border-bottom: 1px dashed #ddd;
}
</style>
